<template>
  <div class="Carused">
    <Head msg="车源管理中心">
      <div class="create-btn" @click="toadd">发布</div>
    </Head>
    <div class="classify-main">
      <div
        :class="status == 1 ? 'classify-active' : ''"
        @click="classifyclick(1)"
      >
        出售中({{ count.sale }})
      </div>
      <!--          <div :class="classify==0?'classify-active':''" @click="classifyclick()">审核中</div>-->
      <div
        :class="status == 0 ? 'classify-active' : ''"
        @click="classifyclick(0)"
      >
        已下架({{ count.unsale }})
      </div>
    </div>
    <div class="mycar-main">
      <cube-scroll
        ref="scroll"
        :data="list"
        :options="options"
        @pulling-up="listCar"
      >
        <div class="mycar-list" v-for="(item, index) in list" :key="index">
          <div class="mycar-one">
            <div class="one-title">{{ item.goods_name }}</div>
            <div class="one-price">{{ item.shop_price }}万</div>
          </div>
          <div class="mycar-two">{{ item.type }}-{{ item.mold }}</div>
          <div class="mycar-three">{{ item.in_color }} | {{ item.area }}</div>
          <div class="mycar-four">发布时间：{{ item.update_time }}</div>
          <div class="mycar-five-main">
            <div
              v-if="item.auth_status == 0"
              style="font-size: 14px;color: tomato"
            >
              审核中
            </div>
            <div
              v-if="item.auth_status == 2"
              style="font-size: 14px;color: red"
            >
              审核失败
            </div>
            <div
              v-if="item.auth_status == 1"
              style="font-size: 14px;color: #339933"
            >
              审核通过
            </div>
            <div class="mycar-five">
              <div
                v-if="status == 0"
                style="color: dodgerblue"
                @click="toupdate(item.goods_id)"
              >
                修改
              </div>
              <div
                v-if="status == 0"
                style="color: red"
                @click="delCar(item.goods_id)"
              >
                删除
              </div>
              <div
                v-if="status == 1"
                style="color: purple"
                @click="changeCar(item.goods_id)"
              >
                下架
              </div>
              <div
                v-if="status == 0 && item.auth_status == 1"
                style="color: purple"
                @click="changeCar(item.goods_id)"
              >
                上架
              </div>
              <div style="color: green" @click="tocarview(item.goods_id)">
                预览
              </div>
            </div>
          </div>
        </div>
        <Notice msg="暂无数据" :notice="list.length"></Notice>
      </cube-scroll>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Sence from '../sence/Sence';
// import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import Head from '@/components/Head.vue';
import Notice from '@/components/Notice.vue';

@Component({
  components: {
    Head,
    Notice,
  },
})
export default class Carused extends Sence {
  public list: any = []; //车源数据
  public count: any = { sale: 0, unsale: 0 }; //车源数量数据
  public status: number = 1; //车源分类 1:出售中#0:已下架
  public page: number = 1; //当前页面
  public size: number = 10; //每页记录数
  public options: object = {
    pullUpLoad: true,
  }; //上拉加载

  public mounted(): void {
    this.listCar();
  }

  //分类切换
  public classifyclick(data: number): void {
    this.status = data;
    this.page = 1;
    this.list = [];
    this.options = {
      pullUpLoad: true,
    };
    this.listCar();
  }

  //车源列表
  public listCar(): void {
    this.post('api/v1/listCar', {
      status: this.status,
      page: this.page,
      size: this.size,
    }).then((res: any) => {
      this.list = [...this.list, ...res.data.list];
      this.count = res.data.count;
      this.page += 1;
      if (res.data.list.length < this.size) {
        this.options = {
          pullUpLoad: false,
        };
      }
    });
  }

  //下架
  public changeCar(id: number): void {
    (<any>this)
      .$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '提示',
        content: this.status == 1 ? '确定下架车源？' : '确定上架车源',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;',
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;',
        },
        onConfirm: () => {
          this.post('api/v1/changeCar', { car_id: id }).then((res: any) => {
            if (this.status == 1) {
              this.toast('下架成功');
              this.status = 0;
              this.classifyclick(this.status);
            } else {
              this.toast('上架成功');
              this.status = 1;
              this.classifyclick(this.status);
            }
          });
        },
        onCancel: () => {},
      })
      .show();
  }

  //预览
  public tocarview(id: number): void {
    this.$router.push(`/mycarview?id=${id}`);
  }

  //修改
  public toupdate(id: number) {
    this.$router.push(`/mycaradd?id=${id}`);
  }

  //删除
  public delCar(id: number): void {
    (<any>this)
      .$createDialog({
        type: 'confirm',
        icon: 'cubeic-alert',
        title: '提示',
        content: '确定删除车源？',
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;',
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;',
        },
        onConfirm: () => {
          this.post('api/v1/delCar', {
            car_id: id,
          }).then((res: any) => {
            this.toast('删除成功');
            this.classifyclick(this.status);
          });
        },
        onCancel: () => {},
      })
      .show();
  }

  //发布
  public toadd(): void {
    this.post('api/v1/checkRepPoint', {}).then((res: any) => {
      this.$router.push('/mycaradd');
    });
  }
}
</script>

<style scoped lang="stylus">
.mycar-main
    height calc(100vh - 50px - 45px)

.mycar-five-main
    display flex
    flex-direction row
    justify-content space-between
    align-items center

.create-btn
    box-sizing content-box
    position absolute
    background red
    color white
    height 20px
    line-height 22px
    padding 2px 10px
    font-weight bold
    font-size 14px
    top: 10px
    right 20px
    z-index 100

.classify-main
    display flex
    flex-direction row

    > div
        box-sizing content-box
        width 50vw
        text-align center
        height 37px
        line-height 37px
        font-weight bold
        border-bottom 3px solid #ccc

    .classify-active
        color red
        border-bottom 3px solid red

.mycar-list
    width 100vw
    display flex
    flex-direction column
    padding 0 10px 10px 10px
    box-sizing border-box
    background white
    border-bottom 2px solid #ccc

    > div
        font-size 14px
        margin-top 10px

    .mycar-one
        display flex
        flex-direction row
        justify-content space-between

        .one-title
            width calc(100vw - 20vw - 20px)
            font-size 16px
            font-weight bold
            text-align left
            line-height 20px

        .one-price
            width 20vw
            font-weight bold
            font-size 16px
            color red
            line-height 20px


    .mycar-two
        text-align left

    .mycar-three
        text-align left

    .mycar-four
        text-align left
        color #808080

    .mycar-five
        display flex
        flex-direction row
        justify-content flex-end

        > div
            margin-left 12px
            font-size 14px
</style>
